<template>
  <div class="box" style="position: relative; overflow: auto">
    <navigation ref="navigation" @searchNav="searchNavigation"></navigation>
    <div class="tag">
      <div v-for="(item, index) in cateArr" :key="index">
        <el-button
          type="success"
          size="mini"
          @click="goLocation('A' + index)"
          >{{ item }}</el-button
        >
      </div>
      <el-button
        type="primary"
        plain
        size="mini"
        style="margin-left: 30px"
        @click="addNav"
        >添加分类</el-button
      >
    </div>
    <div v-for="(item, index) in navData" :key="index" style="margin-top: 50px">
      <el-card class="box-card" :id="'A' + index">
        <div slot="header" class="clearfix">
          <span>{{ item.category }}</span>
          <el-button
            type="primary"
            plain
            size="mini"
            style="margin-left: 30px"
            @click="addNav(item)"
            >添加导航</el-button
          >
          <el-button style="float: right; padding: 3px 0" type="text"
            >收起</el-button
          >
        </div>
        <div
          v-for="nav in item.navigation"
          :key="nav.id"
          class="text item"
          style="display: inline-block; width: 46%; margin: 0 2% 15px"
        >
          <div class="nav-primary">
            <el-descriptions
              :title="nav.otcName"
              :column="1"
              border
              size="mini"
            >
              <template slot="extra">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="small"
                  @click="editNav(nav)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  @click="deleteNav(nav.id)"
                  >删除</el-button
                >
              </template>
              <el-descriptions-item label="logo">
                <img
                  :src="nav.otcPath"
                  alt=""
                  width="50px"
                  height="50px"
                  :style="{'background-color': nav.bgColor}"
                />
              </el-descriptions-item>
              <el-descriptions-item label="描述"
                >{{ nav.otcDescribe }}
              </el-descriptions-item>
              <el-descriptions-item label="应用链接">
                <el-link type="primary" :href="nav.path" target="_blank">{{
                  nav.path
                }}</el-link></el-descriptions-item
              >
              <el-descriptions-item label="git地址"
                ><el-link type="primary" :href="nav.name" target="_blank">{{
                  nav.name
                }}</el-link></el-descriptions-item
              >
            </el-descriptions>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import navigation from "./navigation.vue";
type navigationItem = {
  category: string;
  name: string;
  categoryDesc: string;
  otcName: string;
  otcDescribe: string;
  path: string;
  otcPath: string;
  bgColor:string;
  id?:string;
};
interface navData {
  category: string;
  categoryDesc: string;
  navigation: Array<navigationItem>;
}
@Component({
  components: {
    navigation,
  },
})
export default class navi extends Vue {
  created() {
    this.searchNavigation();
  }
  private cateArr: Array<string> = [];
  private navData: Array<navData> = [];
  addNav(item: navigationItem): void {
    (this.$refs.navigation as any).dialogVisible = true; 
    (this.$refs.navigation as any).type = 'add'; 
    if (item.category) {
      (this.$refs.navigation as any).showInput = true;
      (this.$refs.navigation as any).form.categoryValue = item.category;
      (this.$refs.navigation as any).form.describeValue = item.categoryDesc;
    } else {
      (this.$refs.navigation as any).showInput = false;
      (this.$refs.navigation as any).form.categoryValue = "";
      (this.$refs.navigation as any).form.describeValue = "";
    }
  }
  deleteNav(id: string): void {
    this.$confirm("此操作将永久删除该导航信息, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "error",
    })
      .then(() => {
        this.$axios
          .post("/navigation/del", {
            id,
            status:this.$store.state.user.userInfo.status
          })
          .then((res) => {
            if (res.data.error === -1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.searchNavigation();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
  }
  editNav(nav:navigationItem): void {
    console.log(nav);
    (this.$refs.navigation as any).type = 'update'; 
        (this.$refs.navigation as any).dialogVisible = true; 
    (this.$refs.navigation as any).showInput = true;
    let {category:categoryValue,categoryDesc:describeValue,otcDescribe:otcDescribeValue,otcName:navValue,otcPath:imgValue,name:gitValue,path:navPathValue,bgColor,id} = nav;
      (this.$refs.navigation as any).form = {categoryValue,navValue,navPathValue,imgValue,gitValue,otcDescribeValue,describeValue,bgColor,id};
  }
  goLocation(item: string): void {
    console.log(item);
    let clickDom: any = document.querySelector("#" + item);
    console.log(clickDom.offsetTop);
    document.querySelector(".box")!.scrollTop = clickDom.offsetTop - 50;
  }
  searchNavigation(): void {
    this.$axios.get("/navigation/search").then((res: any) => {
      this.cateArr = Array.from(
        new Set(res.data.data.map((item: any) => item.category))
      );
      this.navData = this.cateArr.map((item) => {
        return {
          category: item,
          categoryDesc: "",
          navigation: [],
        };
      });
      console.log(this.navData);
      this.navData.forEach((navItem) => {
        res.data.data.forEach((item: navigationItem) => {
          if (item.category === navItem.category) {
            navItem.navigation.push(item);
            navItem.categoryDesc = item.categoryDesc;
          }
        });
      });
    });
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: calc(100vh - 70px);
  overflow: auto;
}
.tag {
  display: flex;
  box-sizing: border-box;
  padding: 15px;
  position: fixed;
  width: 100%;
  height: 50px;
  align-items: center;
  background-color: #fff;
  z-index: 9;
  // top: 0;
  div {
    flex-basis: 80px;
  }
}
</style>